<template>
  <!--        用户面板-->
  <div v-if="isLogin()" class="user-panel-fade-in">
    <h3>欢迎回来 {{ user.userName }}</h3>
    <img v-if="!isNull(user.userHeadPortraitUrl)"
         :src="globalConst.staticResourceUrl +'img/'+ user.userHeadPortraitUrl"
         alt="用户头像加载失败"
         class="userHeadPortraitUrl">
    <p v-else>您没有设置用户头像</p>
    <p class="text-gradient">您当前持有硬币(积分): {{ user.coin }}</p>
    <!-- 用户导航 -->
    <nav class="user-panel">
      |
      <button @click="jumpInNewTab('/src/page/users/index.html')" class="user-msg-button">查看和编辑资料</button>
      <!--      <button to="/user/sharing">我的分享</button>-->
      <!--      |-->
      <!--      <button to="/user/collection">我的收藏</button>-->
      <!--      |-->
      <!--      <button to="/user/friends">我的好友</button>-->
      <button @click="exit" class="user-exit-button">退出登陆</button>
    </nav>
    <p class="tip">
      由于服务器经常抽风,这可能会导致您的状态和服务器状态不一致,如果页面出现了奇怪的效果时可以点击这个按钮清除本地所有缓存</p>
    <button @click="dleAllDate()" class="del-cache">清空本地缓存</button>
    <button @click="test" class="test-service">点击检查服务器状态</button>
  </div>
  <div v-else>
    <button @click="login" class="user-login">登陆</button>
    <button @click="test" class="test-service">点击检查服务器状态</button>
  </div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import {jump, jumpInNewTab} from "@utils/router.ts";
import axiosInstance from "@utils/axiosInstance.ts";
import ResponseResult from "@models/ReturnResult.ts";
import {dleAllDate, getUser, getUserToken, setUser} from "@stores/localStorage.ts";
import {useGlobalConfirm} from "@utils/ConfirmDialogPlugin.ts";
import {globalConst} from "@constants/globalConst.ts";
import {isNull} from "@utils/stringUtil.ts";
import {Users} from "@models/User.ts";
import Cookie from "js-cookie";

const user = ref(getUser())

function exit(): void {
  console.log('test')
  const handleDelete = async () => {
    // 获取全局确认对话框函数
    const confirm = useGlobalConfirm()
    const result = await confirm('确定要退出登陆吗?', {title: '是否退出确认'})
    const tokenName = globalConst.tokenName
    if (result) {
      axiosInstance.get('/login/userExit', {
        headers: {
          [globalConst.tokenName]: getUserToken()
        }
      }).then(response => {
        const r = ResponseResult.fromApiResponse(response.data)
        if (r.isSuccess()) {
          setUser(Users.fromApiResponse({
            userName: Cookie.get('114514UserName') || '游客',
            coin: parseInt(Cookie.get('114514UserCoin') || '0'),
            userHeadPortraitUrl: Cookie.get('114514UserHeadPortraitUrl') || null,
            userId: parseInt(Cookie.get('114514UserId') || '-1'),
            jurisdiction: parseInt(Cookie.get('114514UserJurisdiction') || '0')
          }))
          localStorage.removeItem(globalConst.tokenName)
          alert(r.msg)
          getUser()
          user.value = Users.fromApiResponse({});
        } else {
          alert('退出登陆失败,因为:' + r.msg)
        }
      })
    }
  }
  handleDelete()
}

console.log("userMsg:"+user.value)
function isLogin(): boolean {
  return user.value.hasUserMsg() && !isNull(getUserToken())
}

function login() {
  jump('src/page/login/index.html')
}

function test() {
  axiosInstance.get(`${globalConst.baseUrl}test`,
      {
        headers: {
          [globalConst.tokenName]: getUserToken()
        }
      }).then(response => {

    if ("test" === response.data) {
      alert('服务器状态正常')
      setUser(getUser())
    } else
      alert(response.data)
  })
}


</script>
<style scoped>
/* 用户面板容器 */
.user-panel-fade-in {
  background: rgba(26, 26, 26, 0.75); /* 半透明卡片 */
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 2rem;
  max-width: 600px;
  margin: 2rem auto;
  box-shadow: 0 8px 30px rgba(255, 42, 109, 0.2);
  animation: fadeIn 0.8s ease-out;
  border: 1px solid rgba(255, 42, 109, 0.3);
  position: relative;
}

/* 欢迎标题 */
.user-panel-fade-in h3 {
  font-size: 1.8em;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary-red), var(--primary-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 8px rgba(255, 42, 109, 0.4);
  margin-bottom: 1rem;
}

/* 用户头像 */
.userHeadPortraitUrl {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid var(--primary-red);
  box-shadow: 0 0 12px rgba(255, 42, 109, 0.6), 0 0 20px rgba(211, 54, 255, 0.3);
  margin-bottom: 1rem;
  object-fit: cover;
}

/* 积分显示 */
.user-panel-fade-in .text-gradient {
  font-weight: 600;
  font-size: 1.1em;
  display: inline-block;
  margin-bottom: 1.2rem;
  animation: pulse-light 2s infinite alternate;
}

/* 用户导航按钮 */
.user-panel nav.user-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.user-panel nav button {
  font-size: 0.9em;
  padding: 0.6em 1.2em;
  border-radius: 10px;
  border: 2px solid transparent;
  background: linear-gradient(135deg, var(--primary-red), var(--primary-purple));
  color: var(--text-primary);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.user-panel nav button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.user-panel nav button:hover::before {
  left: 100%;
}

.user-panel nav button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

/* 退出按钮/灰色次按钮 */
.user-exit-button,
.del-cache,
.test-service {
  background: var(--secondary-gray);
  border-color: var(--secondary-gray-light);
}

.user-exit-button:hover,
.del-cache:hover,
.test-service:hover {
  background: var(--secondary-gray-light);
  border-color: var(--accent-blue);
  box-shadow: 0 0 12px rgba(77, 195, 255, 0.5);
}

/* 提示文字 */
.user-panel-fade-in .tip {
  color: var(--text-secondary);
  font-size: 0.85em;
  line-height: 1.5;
  margin-bottom: 1rem;
  text-align: justify;
}

/* 登陆按钮 */
.user-login {
  background: linear-gradient(135deg, var(--primary-red), var(--primary-purple));
  border-radius: 12px;
  padding: 0.8em 1.6em;
  font-size: 1em;
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin: 1rem 0.5rem 0 0;
  transition: all 0.3s ease;
}

.user-login::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.user-login:hover::before {
  left: 100%;
}

.user-login:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

</style>
